<template>
  <main>
    <top :run="182" />
    <div class="wrap">
      <div class="left sq">
        <div class="sq1">
          <div class="title">站点概括</div>
          <left-top />
        </div>
        <div class="sq2">
          <div class="title">通讯情况</div>
          <left-center />
        </div>
        <div class="sq3">
          <div class="title">设备到期提醒</div>
          <left-bottom />
        </div>
      </div>
      <div class="center">
        <div class="cT">01</div>
        <div class="cB">
          <div class="title">工单情况</div>
          <div class="right">
            <div>
              <img src="../../assets/level1.png" alt="">
              <span>一般告警</span>
            </div>
            <div>
              <img src="../../assets/level2.png" alt="">
              <span>一般告警</span>
            </div>
            <div>
              <img src="../../assets/level3.png" alt="">
              <span>一般告警</span>
            </div>
          </div>
          <center-bottom />
        </div>
      </div>
      <div class="right sq">
        <div class="sq1">
          <div class="title">运行数据</div>
          <right-top />
        </div>
        <div class="sq2">
          <div class="title">巡检情况</div>
          <right-center />
        </div>
        <div class="sq3">
          <div class="title">故障情况</div>
          <right-bottom />
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import Top from '@/views/dataScreen/components/Top.vue'
import LeftTop from './components/LeftTop'
import RightTop from './components/RightTop'
import LeftBottom from './components/LeftBottom'
import RightBottom from './components/RightBottom'
import LeftCenter from './components/LeftCenter'
import RightCenter from './components/RightCenter'
import CenterBottom from './components/CenterBottom'
export default {
  components: {
    Top,
    LeftTop,
    LeftBottom,
    RightTop,
    RightBottom,
    LeftCenter,
    RightCenter,
    CenterBottom
  }
}
</script>

<style scoped lang="scss">
main {
    height: 100%;
    background: url('../../assets/bg.jpg') no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .wrap {
        padding: 1vh;
        width: 100%;
        height: calc(100% - 78px);
        display: flex;
        .sq {
            display: flex;
            flex-direction: column;
            .sq1 {
                background: url('../../assets/sq1.png') no-repeat;
                background-size: 100% 100%;
                height: 25%;
                position: relative;
                .title {
                    position: absolute;
                    color: #7CDAFA;
                    font-size: 18px;
                    height: 31%;
                    display: flex;
                    padding: 0 3vw;
                    align-items: center;
                }
            }
            .sq2 {
                background: url('../../assets/sq2.png') no-repeat;
                background-size: 100% 100%;
                height: 35%;
                position: relative;
                .title {
                    position: absolute;
                    color: #7CDAFA;
                    font-size: 18px;
                    height: 22%;
                    display: flex;
                    padding: 0 3vw;
                    align-items: center;
                }
            }
            .sq3 {
                background: url('../../assets/sq3.png') no-repeat;
                background-size: 100% 100%;
                height: 40%;
                position: relative;
                .title {
                    position: absolute;
                    color: #7CDAFA;
                    font-size: 18px;
                    height: 23%;
                    display: flex;
                    padding: 0 3vw;
                    align-items: center;
                    border: 1px solid #000;
                }
            }
        }
        .left {
            width: 25%;
        }
        .center {
            width: 50%;
            display: flex;
            flex-direction: column;
            .cT {
                height: 60%;
                background: url('../../assets/cT.png') no-repeat;
                background-size: 100% 100%;
            }
            .cB {
                height: 40%;
                background: url('../../assets/cB.png') no-repeat;
                background-size: 100% 100%;
                position: relative;
                .title {
                    position: absolute;
                    color: #7CDAFA;
                    font-size: 18px;
                    padding: 3vh 4.8vw;
                }
                .right {
                    position: absolute;
                    width: 350px;
                    right: 0;
                    padding: 3vh 0 0 0;
                    display: flex;
                    > div {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 20px;
                    }
                }
            }
        }
        .right {
            width: 25%;
        }
    }
}
</style>

<style lang="scss">
svg > path:nth-child(2) {
    stroke: url(#blue1);
}
.test {
    svg > path:nth-child(2) {
        stroke: url(#blue2);
    }
}

.el-progress__text {
    color: #fff;
    font-family: "bigfont";
    font-size: 20px!important;
    text-shadow: 0 0 0.5em #078792, 0 0 0.5em #078792;
}

.wrap {
    .el-progress-bar__outer {
        background: #0b646b;
    }
    .el-progress-bar__inner {
        background-image: linear-gradient(to right, #00efff, #cff3c1);
    }
}
.wrap2 {
    .el-progress-bar__outer {
        background: #403336;
    }
    .el-progress-bar__inner {
        background-image: linear-gradient(to right, #ff0000, #cff3c1);
    }
}
.wrap3 {
    .el-progress-bar__outer {
        background: #0b656d;
    }
    .el-progress-bar__inner {
        background-image: linear-gradient(to right, #fcff00, #00fff6);
    }
}
.wrap4 {
    .el-progress-bar__outer {
        background: #087560;
    }
    .el-progress-bar__inner {
        background-image: linear-gradient(to right, #04ff16, #18ffe7);
    }
}
.wrap5 {
    .el-progress-bar__outer {
        background: #244f50;
    }
    .el-progress-bar__inner {
        background-image: linear-gradient(to right, #525252, #b9d7d4);
    }
}
</style>
